<template>
    <el-dialog
  title="选择文件"
  :visible.sync="uploadDialog"
  :show="show"
  @close="click"
  class="uploim"
  width="800px"
  >
  <el-row>
      <el-col :span="12">
<el-form :inline="true" :model="formInline" class="demo-form-inline">
  <el-form-item >
      
    <el-input v-model="formInline.user" size="mini" placeholder="关键字查询"></el-input>
  </el-form-item>
 
  <el-form-item>
    <el-button type="primary"  size="mini">查询</el-button>
  </el-form-item>
</el-form>



      </el-col>
      <el-col :span="12">
 <el-upload
  class="upload-demos"
  :action="_self.actions"
  multiple
  :on-success="uploadsuccess"
  :headers="uploadHeader"
  :show-file-list="false"
  >
  <el-button  type="primary" size="mini">点击上传</el-button>
  
</el-upload>
      </el-col>
  </el-row>
 
<div>
    <el-tabs tab-position="left"  style="height: 350px;" class="uploadTab" @tab-click="tabClick">
    <el-tab-pane label="图片" name="0">
        <el-row>
            <el-col :span="4" v-for="v in tableData" :key="v.f_id"  >
                <el-image style="width: 100px; height: 100px" :src="imgURL+v.urls" fit="fill" @click="selectImg(v)">
                    
                </el-image>
                <div class="selectBj " :class="[v.show? 'showflex' : 'hide']">
                    <i class="fa fa-check"></i>
                </div>
            </el-col>
           
          
        </el-row>
         <el-pagination
           @size-change="handleSizeChanges"
           @current-change="handleCurrentChanges"
           :current-page="pageNumber"
           :page-sizes="[10, 50, 100, 200]"
           :page-size="pageSize"
            layout="total, prev, pager, next, jumper"
           :total="total">
         </el-pagination>
    </el-tab-pane>
    
    <el-tab-pane label="文件" name="1">
        <el-row>
            <el-col :xs="8" :sm="8" :md="6" :lg="6" :xl="4" class="filebj" v-for="v in tableData" :key="v.f_id">
                
               <div  @click="selectImg(v)">{{v.name.substring(v.name.lastIndexOf("\/")+1,v.name.length)}}</div> 
               <div class="selectBjs " :class="[v.show? 'showflex' : 'hide']">
                    <i class="fa fa-check"></i>
                </div>
            </el-col>
        </el-row>    
 <el-pagination
   @size-change="handleSizeChanges"
   @current-change="handleCurrentChanges"
   :current-page="pageNumber"
   
   :page-size="pageSize"
    layout="total, prev, pager, next, jumper"
   :total="total">
 </el-pagination>

    </el-tab-pane>
    <el-tab-pane label="视频" name="2">
<el-row>
            <el-col :xs="20" :sm="20" :md="20" :lg="11" :xl="11" class="filebj" v-for="v in tableData" :key="v.f_id">
              <div @click="selectImg(v)">  <video  controls width="80%" height="80%">
    <source :src="imgURL+v.urls" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    您的浏览器不支持 video 标签。
</video></div>
<div class="selectBjs " :class="[v.show? 'showflex' : 'hide']">
                    <i class="fa fa-check"></i>
                </div>
            </el-col>
        </el-row>  

	<el-pagination
	  @size-change="handleSizeChanges"
	  @current-change="handleCurrentChanges"
	  :current-page="pageNumber"
	  :page-sizes="[10, 50, 100, 200]"
	  :page-size="pageSize"
	   layout="total, prev, pager, next, jumper"
	  :total="total">
	</el-pagination>
    </el-tab-pane>
    <el-tab-pane label="其它">其它</el-tab-pane>
  </el-tabs>
</div>
  <span slot="footer" class="dialog-footer">
    <el-button @click="uploadDialog = false" size="mini">取 消</el-button>
    <el-button type="primary" @click="sureSelect" size="mini">确 定</el-button>
  </span>
</el-dialog>
</template>
<script>
var _self;
let uploads = process.env.VUE_APP_BASE_API;
let imgUrl = process.env.VUE_APP_BASE_API_IMG;
import {listFiles} from '@/api/files/files'
import {getToken} from '@/utils/token'
export default {
    name:'upload',
    data(){
       return{
        uploadDialog:this.show,
        pageSize:15, //一页显示多少条
        pageNumber:1, //当前多少页
        keyWord:'',
        total:0,//总页数
        imgURL:imgUrl,
        tableData:[],
        selectDate:[],
        formInline:{
            user:''
        },
        fileType:this.type,
        
		actions:uploads+"/uploads/index",
		uploadHeader:{token:getToken()},
       }
    },
    props:{
        
       
        show: {
                type: Boolean,
                default: false
            },
        selectType:{
            type:Number,
            default:1
        },
        type:{
            type:Number,
            default:0
        }    

    },
     watch: {
            show () {
                this.uploadDialog = this.show;
            }
        },
       created:function(){
           _self = this;
           
          // _self.imgURL = baseImgUrl;
           _self.init();
    },
   
    methods:{
        selectImg:function(item){
            //console.log("我被点击了");
            //console.log(_self.selectType);
              if(item.show==true){
                   _self.$set(item,'show',false);
                    if(_self.selectType!=1){
                        _self.selectDate=[];
                    }else{
                        _self.selectDate.forEach(function (its){
                            if(its.id==item.f_id){
                                var index = _self.selectDate.indexOf(its);
                                if(index>-1){
                                    _self.selectDate.splice(index, 1);
                                }
                            }
                        });
                    }

                }else{

                    _self.$set(item,'show',true);
                    if(_self.selectType==1){

                        _self.tableData.forEach(function (its) {

                            if(its.f_id!=item.f_id){
                                _self.$set(its,'show',false);
                            }
                        });
                        _self.selectDate=[];
                        _self.selectDate.push({id:item.f_id,urls:item.urls});
                    }else{
                        _self.selectDate.push({id:item.f_id,urls:item.urls});
                    }

                }
        },
         click() {
         this.$emit('update',this.show)
         this.selectDate=[];
        
        },
		uploadsuccess(res){
			//this.init();
			if(res.code==200){
				_self.init();
				_self.msgSuccess(res.msg);
			}else{
				_self.msgError(res.msg);
			}
		},
        sureSelect:function(){
            // this.show = false;
            // this.uploadDialog = false;
         this.$emit('selectSure',this.selectDate);
        
         this.click();
         this.selectDate=[];
         this.init();
         
        },
        init:function(){
            let param={"pageSize":_self.pageSize,"pageNumber":_self.pageNumber,"keyWord":_self.keyWord,"type":_self.fileType}
           listFiles(param).then((res)=>{
		  	console.log(res);
		  	if(res.code==200){
				if(_self.selectDate!=null&&_self.selectDate!='undefined'){
				      _self.selectDate.forEach(function (item) {
				          _self.tableData.forEach(function (its){
				                   if (its.f_id == item.id) {
				                       _self.$set(its,'show',ture);
				                  
				                   }
				               })
				      })
				   }  
				
		  		_self.tableData=res.data.list;
		  		_self.total = res.data.total;
		  		_self.loading=false;
		  	}
		  })
		  
		  
         
        },
        tabClick:function(tab, event){
             _self.fileType= Number(tab.name);
             _self.selectDate=[];
             _self.init();
        },
        handleSizeChanges:function(e){
            //console.log(e);
            _self.pageSize = e;
            _self.init();
        },
        handleCurrentChanges:function(e){
            console.log(e);
            _self.pageNumber=e;
            _self.init();
        },
    }
    

}
</script>
<style>
.uploim .el-dialog__body{
    padding: 0;
}
.uploim .el-form-item{
    margin-bottom: 0;
}
.uploim .el-dialog__footer{
    /* background: #f7f7f7; */
    padding: 10px 20px 10px;
}
.uploim .el-tabs--left .el-tabs__header.is-left{
    background: #f7f7f7;
   
}
.filebj{background: #f7f7f7;margin: 5px; padding: 5px;}
.upload-demos{
    display: flex;
   padding: 7px;
}
.uploadTab .el-tabs--left{
    overflow: inherit;
}
.uploadTab .el-tabs__content{
    overflow: auto;
    height: 350px;
}
.uploadTab .el-row{
    height: 300px;
    overflow: auto;
}
.uploadTab .el-row .el-col{
    position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 10px;
}
.uploadTab .el-pagination{
    padding: 0;
    margin-top: 10px;
    
}
.uploadTab .el-image{
    border: #f1f1f1 solid 1px;
}
.uploadTab .el-image:hover{
    border: #409EFF solid 1px;
}
.selectBjs{
    /* background-color: rgba(0,0,0,0.4); */
            
            position: absolute;
            top: 0;
            /* left: 50%; */
            right: 0;
            /* transform:translate3d(-50%,0,0); */
           display: none;
           border-top: 30px solid #67c23a;
    border-left: 30px solid transparent;
}
.selectBjs i{
    position: absolute;
    /* top: 0;
    top: -40px;
    left: -25px; */
    font-size: 10px;
    color: #fff;
        top: -25px;
    left: -15px;
}
.selectBj{
            background-color: rgba(0,0,0,0.4);
            width: 100px;
            height: 100px;
            position: absolute;
            top: 0;
            left: 50%;
            transform:translate3d(-50%,0,0);
           display: none;

        }
        .selectBj i{font-size: 30px; line-height: 100px;color:  #67C23A; }
         .showflex{
            display: flex !important;
            justify-content: center;
        }
</style>